import { addStocked } from '@/services/stock';
import { getQueryParams } from '@/utils/utils';
import { Button, DatePicker, Form, Input, message, Modal } from 'antd';
import moment from 'moment';
import styles from '../index.less';

type Props = {
  visible: boolean;
  handleCancel: () => void;
  getList: () => void;
};

const CreateNew: React.FC<Props> = ({ visible, handleCancel, getList }) => {
  const qs = getQueryParams();
  const [form] = Form.useForm();
  const { RangePicker } = DatePicker;
  const colorThem = localStorage.getItem('color') || '#1a7721';

  // 初始值
  const getInitValues = () => {
    return {
      howmuch: '1',
    };
  };

  const confirmSubmit = async (values: any) => {
    try {
      await addStocked(values).then(() => {
        message.success(`该商品成功入库${form.getFieldValue('qty')}件！`);
        getList();
      });
      handleCancel();
      form.setFieldsValue({ date: [], howmuch: '200', name: '' });
    } catch (error) {
      console.log(error);
    }
  };

  const onFinish = async () => {
    let values = await form.validateFields();
    values.saleid = qs.id;
    values.pdate = new Date(values.date[0]).getTime();
    values.exdate = new Date(values.date[1]).getTime();

    Modal.confirm({
      title: '新建',
      centered: true,
      content: '请确认要提交的数据',
      okText: '确认',
      cancelText: '取消',
      onOk: () => confirmSubmit(values),
    });
  };

  return (
    <Modal
      visible={visible}
      footer={[
        <>
          <Button
            onClick={() => {
              handleCancel();
              form.setFieldsValue({ date: [], saleid: '', flot: '', qty: '' });
            }}
            className={styles.btnCancel}
          >
            取消
          </Button>
          <Button
            className={styles.btnSeal}
            style={{ background: `${colorThem}`, width: 120, color: '#fff' }}
            htmlType="submit"
            type="primary"
            onClick={onFinish}
          >
            新建
          </Button>
        </>,
      ]}
      closable={false}
      onCancel={handleCancel}
      className={styles.modalStyle}
      width={540}
      title={'新建入库单'}
      centered={true}
    >
      <div className={styles.modalContent}>
        <Form
          onFinish={onFinish}
          form={form}
          initialValues={getInitValues()}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 40 }}
        >
          <Form.Item
            label="商品编号"
            name="goodsid"
            validateTrigger="onBlur"
            rules={[
              {
                required: true,
                message: (
                  <div>
                    <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                    请输入商品编号
                  </div>
                ),
              },
            ]}
          >
            <Input placeholder="请输入商品编号" autoComplete="off" />
          </Form.Item>
          <Form.Item
            label="有效日期"
            name="date"
            rules={[
              {
                required: true,
                message: (
                  <div>
                    <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                    请选择有效日期
                  </div>
                ),
              },
            ]}
          >
            <RangePicker
              format={'YYYY/MM/DD'}
              onChange={() => {
                let flotTime = new Date(form.getFieldValue('date')[0]).getTime();
                form.setFieldsValue({ flot: `Q/CZT0002S-${moment(flotTime).format('YYYYMMDD')}` });
              }}
              placeholder={['生产日期', '过期日期']}
            />
          </Form.Item>
          <Form.Item label="入库批次" name="flot">
            <Input placeholder="" autoComplete="off" disabled />
          </Form.Item>
          <Form.Item
            label="入库数量"
            name="qty"
            validateTrigger="onBlur"
            rules={[
              {
                required: true,
                message: (
                  <div>
                    <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                    请输入入库数量
                  </div>
                ),
              },
              {
                pattern: new RegExp(/^\+?[1-9]\d*$/),
                message: (
                  <div>
                    <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                    请输入正确的数量
                  </div>
                ),
              },
            ]}
          >
            <Input placeholder="请输入入库数量" autoComplete="off" />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

export default CreateNew;
